<template>
    <div>
        <nav-bar>
            <template v-slot:default>商品分类</template>
        </nav-bar>
        <!-- <h1>类别</h1> -->
        <div id="mainbox">

            <div class="ordertab">
                    <van-tabs v-model:active="activekey" @click="tabClick">
                        <van-tab title="销量排序"></van-tab>
                        <van-tab title="价格排序"></van-tab>
                        <van-tab title="评论排序"></van-tab>
                    </van-tabs>

            </div>
            <van-sidebar class="leftmenu" v-model="active">
                <van-collapse v-model="activeName" accordion>
                    <van-collapse-item v-for="(item,index) in categories" :key="item.id"
                     :title="item.name"
                     :name="item.id">
                     <van-sidebar-item v-for="sub in item.children"
                                    :title="sub.name"
                                    :key="sub.id"
                                    @click="getGoods(sub.id)"/>
                    </van-collapse-item>
             
                </van-collapse>
            </van-sidebar>
            <!-- <div class="leftmenu"></div> -->
            <div class="goodslist">
                <div class="content">
                    <van-card 
                        v-for="item in showGoods" :key="item.id"
                        @click="itemClick(item.id)"
                        :num="item.sales"
                        :tag="item.sales >=30 ? '流行' : '标签'"
                        :price="item.price"
                        :desc="item.updated_at"
                        :title="item.title"
                        :thumb="item.cover_url"
                    >

                    </van-card>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
#mainbox{
    margin-top: 45px;
    display: flex;
}
.ordertab{
    flex: 1;
    float: right;
    width: 100%;
    /* background: red; */
    height: 50px;
    z-index: 9;
    position: fixed;
    top: 45px;
    right: 0;
    left: 130px;
}
.leftmenu{
    position: fixed;
    top:95px;
    left: 0;
    /* background: green; */
    width: 130px;
}
.goodslist{
    flex:1;
    /* background: blue; */
    position: absolute;
    top: 100px;
    left: 130px;
    right: 0;
    height: 100vh;
    padding: 10px;
    text-align: left !important;
}
.van-card_thumb{
    width: 68px;
}
</style>
<script>
import NavBar from '@/components/common/NavBar/NavBar.vue';
import BackTop from '@/components/common/backTop/BackTop.vue';
import {getCategory,getCategoryGoods} from 'network/category'
import { onMounted,ref,reactive,computed,watchEffect,nextTick } from 'vue';
import BScroll from 'better-scroll';
import { useRouter } from 'vue-router';
export default{
    name:"Category",
    setup(){

       const router=useRouter()

        const activekey=ref(0)

        const active=ref(0)

        const activeName=ref(1)

        const categories=ref([])

        let banref = ref(null)

        let bscroll=reactive({})

        let isShowBackTop=ref(false)
        // 当前排序条件
        const currentOrder=ref('sales')
        // 当前的分类ID
        const currentCid = ref(0)
        // 数据类型
        const goods=reactive({
            sales:{page:1,list:[]},
            price:{page:1,list:[]},
            comments_count:{page:1,list:[]}
        })
        const showGoods=computed(()=>{
            return goods[currentOrder.value].list
        })
        const init=()=>{
            getCategoryGoods('sales',currentCid.value).then(res=>{
                // console.log(res.goods.data);
                goods.sales.list=res.goods.data
            })
            getCategoryGoods('price',currentCid.value).then(res=>{
                // console.log(res.goods.data);
                goods.price.list=res.goods.data
            })
            getCategoryGoods('comments_count',currentCid.value).then(res=>{
                // console.log(res.goods.data);
                goods.comments_count.list=res.goods.data
            })
        }

        onMounted(()=>{
            getCategory().then(res=>{
                categories.value=res.categories.slice(0,5)
                console.log(res);
            })
            init()
            // 创建BetterScroll对象
            bscroll = new BScroll(document.querySelector('.goodslist'),{
                probeType:3,
                click:true,
                pullUpLoad:true
            })
            // 注册滚动事件
            bscroll.on('scroll',(pos) => {
                console.log(banref.value);
                isShowBackTop.value=(-pos.y)>300
            })
            bscroll.on('pullingUp', () => {
                console.log('上拉加载更多');
                const page = goods[currentOrder.value].page;
                console.log(page);
                getCategoryGoods(currentOrder.value,currentCid.value,page).then(res=>{
                    console.log(res.goods.data);
                    goods[currentOrder.value].list.push(...res.goods.data)
                    goods[currentOrder.value].page+=1

                })
                
               
        })
    })
        // 排序选项卡
        const tabClick=(index)=>{
            const orders = ['sales','price','comments_count']
            currentOrder.value=orders[index]
           
            init()
            nextTick(()=>{
                // 重新计算高度
                bscroll && bscroll.refresh()
                console.log("变化");
            })
            console.log("当前分类id:" + currentCid.value);
            console.log("当前排序是：" + currentOrder.value);
        }
        // 通过分类get商品
        const getGoods=(cid)=>{
            currentCid.value=cid
            init()
            nextTick(()=>{
                // 重新计算高度
                bscroll && bscroll.refresh()
                console.log("变化1");
            })
            console.log(cid);
            console.log("当前分类id:" + currentCid.value);
            console.log("当前排序是：" + currentOrder.value);

        }
        watchEffect(()=>{
                nextTick(()=>{
                    // 重新计算高度
                    bscroll && bscroll.refresh()
                    console.log("变化3");
                })
            })
            const bTop=()=>{
                console.log("11111");
            bscroll.scrollTo(0,0,500)
        }
        return{
            active,
            categories,
            activeName,
            activekey,
            tabClick,
            currentCid,
            currentOrder,
            getGoods,
            goods,
            showGoods,
            bscroll,
            isShowBackTop,
            bTop,
            itemClick:(id)=>{
                router.push({path:'/detail',query:{id}})
            }
        }
    },
    components:{
        NavBar,
        BackTop
    }
}
</script>